<template>
	<view class="container">

		<view class="example">

			<uni-forms ref="baseForm" :modelValue="baseFormData">

				<uni-forms-item label="手机号" required>
					<uni-easyinput class="login-input" v-model="baseFormData.mobile" 
						placeholder="请输入手机号" />
				</uni-forms-item>

				<!-- 手机验证码获取 -->
				<uni-forms-item label="验证码" required>
					<uni-easyinput class="login-input" v-model="baseFormData.code" placeholder="请输入验证码" />
					<button class="codeButton" @click="getCode">获取验证码</button>
				</uni-forms-item>

			</uni-forms>

			<button class="login-button" @click="login">登录</button>

			<view class="anotherLogin">
				<view class="gotoLogin" @click="goToLogin">
					>>>账号密码登录
				</view>
			</view>

		</view>

	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiLogin,
		apiGetMember,
		apiGetBuyCourse,
		apiGetCode
	} from '../../apis/login.js'

	const baseFormData = ref({
		mobile: "", // 示例手机号
		code: ""
	});

	const getCode = async () => {
		console.log("==================手机号=================");
		console.log(baseFormData.value.mobile);
		const response = await apiGetCode(baseFormData.value.mobile);
		uni.showTabBar({
				title: "成功获取验证",
				icon: "success"
		})
		/* try {
			console.log("==================手机号=================");
			console.log(baseFormData.value.mobile);
			const response = await apiGetCode(baseFormData.value.mobile);
			if (response.statusCode === 200) {
				console.log('验证码:', response.statusCode); // 打印验证码
			} else {
				console.error('请求失败，状态码:', response.statusCode);
			}
		} catch (error) {
			console.error('获取验证码失败:', error);
		} */
	};


	const login = async () => {
		let res = await apiLogin(baseFormData.value);
		if (res.data.code == 200) {
			uni.setStorageSync("token", res.data.data);
			uni.showToast({
				title: "登录成功",
				icon: "success"
			})
			getMember()
			getBuyCourse()
			uni.switchTab({
				url: '../index/index'
			});
		} else {
			uni.showToast({
				title: res.msg,
				icon: "error"
			})
		}
	}


	const member = ref()


	const getMember = async () => {
		let res = await apiGetMember()
		member.value = res.data.data
		uni.setStorageSync("member", member.value)
		console.log("======会员信息==========")
		console.log(member.value);
	}


	const buyCourses = ref([])


	const getBuyCourse = async () => {
		let res = await apiGetBuyCourse()
		console.log("======已购课程==========")
		console.log(res.data.data);
		buyCourses.value = res.data.data
		let courseIds = buyCourses.value.map(item => item.courseId)
		console.log(courseIds);
		console.log("========================");
		uni.setStorageSync("BuyCourses", courseIds)
	}

	const goToLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding: 10px;
		background:
			linear-gradient(to bottom, transparent, #cfffcb 100%),
			linear-gradient(to right, #fe0004, #ff06de, #4d07ff);
		min-height: 80vh;
	}

	.example {
		padding: 15px;
		background-color: rgba(245, 251, 255, 0.4);
		border-radius: 8px;
		box-shadow: 0 4px 5px rgba(234, 243, 254, 0.6);
		//background-color: #fff;
	}


	.segmented-control {
		margin-bottom: 15px;
	}


	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}


	.form-item {
		display: flex;
		align-items: center;
	}


	.login-button {
		color: #FFFFFF;
		font-size: 20px;
		width: 400rpx;
		height: 80rpx;
		// background-color: #3b96dc;
		background:
			linear-gradient(to right, #FF4500, #8B00FF, #1E90FF, );
		border-radius: 50rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		color: #ffffff;
		margin-bottom: 20px;
	}

	.anotherLogin {
		display: flex;
		color: #0000ff;
		text-decoration: underline;
		font-size: 12px;
		justify-content: flex-end;
		/* 使内容在容器中右对齐 */
	}

	button {
		height: 35px;
		border: 0rpx;
		font-size: 10px;
		padding: 0 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>